<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="viewport-fit=cover,width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover"/>
		<link href="../../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../../css/reset.css" />
		<link rel="stylesheet" href="../../../css/style.css" />
		<style type="text/css">
			.mui-scroll-wrapper{ overflow: auto; }
			.mui-scroll{ position: relative; width: auto;}
			.mui-bar-nav ~ .mui-content.mui-scroll-wrapper .mui-scrollbar-vertical{ top: 0;}
			.mui-input-row label{ width: 15%; padding: 11px 10px; text-align: center;}
			#back{ touch-action: none;}
			body{ background-color: rgb(243, 243, 243);}
		</style>
	</head>

	<body>
		<div id="content_details">
			<transition name="fade">
				<header class="mui-bar mui-bar-nav" v-show="topTitleBar" @tap="toTop">
					<a id="back" class="mui-icon mui-icon-left-nav mui-pull-left" @tap="backRead"></a>
					<h1 class="mui-title">{{details.section_title}}</h1>
				</header>
			</transition>
			<div class="mui-scroll-wrapper p0">
				<div class="read_box mui-scroll">
					<div v-html="details.content" @tap="open_bottom_box"></div>
					<div class="pages clearfix">
						<a class="prevPage fl" @tap="prev_page(prev)" v-if="prev != -1">上一节</a>
						<a class="nextPage fr" @tap="next_page(next)" v-if="next != -1">下一节</a>
					</div>
				</div>
			</div>

			<!--底部控件弹出层-->
			<div class="readPopMask" v-if="popMask" @tap="close_notebook"></div>
			<transition name="fade">
				<div class="fix_panel" v-show="bottomBar">
					<!--<div class="mui-input-row mui-input-range articleJump">
						<label class="arr_prev fl" v-if="prev != -1" @tap="prev_page(prev)"><img src="../../../images/arr_prev.png"/></label>
						<div class="article_range mt0"><input style="height: 2px;" type="range" min="0" max="100" v-model="jd"></div>
						<label class="arr_next fr" v-if="next != -1" @tap="next_page(next)"><img src="../../../images/arr_next.png"/></label>
					</div>-->
					<ul>
						<li class="icon_ml" @tap="open_mulu">
							<p><a class="mui-icon mui-icon-catalog"></a></p>
							<p>目录</p>
						</li>
						<li class="icon_zt" @tap="set_font">
							<p><a class="mui-icon mui-icon-font"></a></p>
							<p>字体</p>
						</li>
						<li class="icon_bj" @tap="set_noetbook">
							<p><a class="mui-icon mui-icon-note"></a></p>
							<p>笔记</p>
						</li>
						<li class="icon_sq" @tap="set_shuqian">
							<p v-if="details.bookmark == 'NO'"><a class="mui-icon mui-icon-mark"></a></p>
							<p v-if="details.bookmark == 'YES'"><a class="mui-icon mui-icon-marked red"></a></p>
							<p class="sq_txt" :style="styleObject">书签</p>
						</li>
					</ul>
				</div>
			</transition>
			<!--字体设置-->
			
			<transition name="font">
				<div class="popFont" v-if="fontBox">
					<div class="bgGroup">
						<a class="bgColor1" :class="color_index == 1 ? ' bgColor1-active' : ''" @tap="setBgColor($event,1)"></a>
						<a class="bgColor2" :class="color_index == 2 ? ' bgColor2-active' : ''" @tap="setBgColor($event,2)"></a>
						<a class="bgColor3" :class="color_index == 3 ? ' bgColor3-active' : ''" @tap="setBgColor($event,3)"></a>
						<a class="bgColor4" :class="color_index == 4 ? ' bgColor4-active' : ''" @tap="setBgColor($event,4)"></a>
						<a class="bgColor5" :class="color_index == 5 ? ' bgColor5-active' : ''" @tap="setBgColor($event,5)"></a>
					</div>
					<div class="fontSet mui-input-row mui-input-range">
						<div class="mui-input-row mui-input-range rangeBox">
							<label class="icon_font"><a class="mui-icon mui-icon-fontsize"></a></label>
							<input class="rangeMargin" type="range" min="14" max="24" v-model="fs">
						</div>
					</div>
					<div class="brightSet">
						<div class="mui-input-row mui-input-range rangeBox">
							<label class="icon_font"><a class="mui-icon mui-icon-sun"></a></label>
							<input class="rangeMargin" type="range"  min="0.1" max="1" step="0.01" v-model="light">
						</div>
					</div>
					<div class="lineHeightSet">
						<div class="mui-input-row mui-input-range rangeBox">
							<label class="icon_font"><a class="mui-icon mui-icon-spacing"></a></label>
							<input class="rangeMargin" type="range"  min="1.4" max="2" step=".1" v-model="he">
						</div>
					</div>
				</div>
			</transition>
			<!--添加笔记-->
			<div class="popNotes" v-if="notesBox">
				<div class="popNotes_box">
					<div class="popNotes_tt">添加笔记</div>
					<form>
						<div class="popNotes_nr">
							<textarea class="notes_area" v-model='noteBookCon' placeholder="开始写笔记……"></textarea>
							<div class="textareaTip">您还可以输入<strong id="textareaCount">{{yes_num}}</strong>个字</div>
						</div>
						<div class="notes_btn">
							<button class="notesBtn" type="button" @tap="notebook_submit">提交</button>
						</div>
					</form>
				</div>
			</div>
		</div>
		
		<script src="../../../js/mui.min.js"></script>
		<script type="text/javascript" src="../../../js/h.min.js" ></script>
		<script type="text/javascript" src="../../../js/jquery.min.js" ></script>
		<script src="../../../js/vue.js"></script>
		<script src="../../../js/public.js"></script>
		<script type="text/javascript" src="../../../js/tpl/read.js"></script>
	</body>

</html>